import ScrollView from "@/base_ui/scroll-view"
import classNames from "classnames"
import PropTypes from "prop-types"
import React, { memo, useState } from "react"
import { TabsWrapper } from "./style"

const SectionTabs = memo((props) => {
  const { tabsName, tabsClick } = props
  const [currentIndex, setCurrentIndex] = useState(0)

  function tabsClickHandle(item, index) {
    // console.log(index);
    setCurrentIndex(index)
    tabsClick(item, index)
  }
  return (
    <TabsWrapper>
      <ScrollView>
        {tabsName?.map((item, index) => {
          return (
            <div
              className={classNames("item", { active: index === currentIndex })}
              key={index}
              onClick={(e) => tabsClickHandle(item, index)}
            >
              {item}
            </div>
          )
        })}
      </ScrollView>
    </TabsWrapper>
  )
})

SectionTabs.propTypes = {
  tabsName: PropTypes.array,
}

export default SectionTabs
